<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js 模板引擎</title>

	<script type="text/javascript" src="src/JTemplate.js"></script>
</head>

<script type="text/html" id="template">

	<h3>{[title]}</h3>
	<ul>
		{[loop list value index]}
		<li class="loop">
			<a href="#">{[value]}</a>
			{[if value == 'xiaoming']}
				<span onclick="testFun();">小明滚出去</span>
			{[/if]}
			<i>{[index]}</i>
		</li>
		{[/loop]}

		{[expr: var name = "yangjian333"]}

		<li>{[name.toUpperCase()]}</li>

		{[if addTime != 0]}
		<li>{[addTime]}</li>
		{[/if]}

		{[expr: var n = 3.14159]}
		<li>Math.ceil(3.14159) : {[Math.ceil(n)]}</li>
		<li>{[wxtime:1458005809]}</li>
		<li>{[wxtime:1458015634]}</li>

		<li>{[dateformat: 1458005809 | 'yyyy年MM月dd日 hh:mm:ss']}</li>
		<li>{[dateformat: $addTime | 'yyyy年MM月dd日 hh:mm:ss']}</li>

		<li>姓名：{[user.name]}, 年龄：{[user.age]}</li>
	</ul>

</script>
<body>

	<div id="container"></div>
	<script>

		data = new Array("xiaoming", "xiaoyang", "小三", "小四", "小五");  //数据模型
		var template = document.getElementById("template").innerHTML;

		JTemplate.assign("title", "js 模板引擎测试");	//添加数据模型
		JTemplate.assign("addTime", 1458015634);
		JTemplate.assign("user", {name : "曾书书", age : 108});
		JTemplate.config("debug", true); //开启调试模式
//		JTemplate.config("tagPrefix", "{[");	//设置模板前缀
//		JTemplate.config("tagSuffix", "]}");   	//设置模板后缀
//		JTemplate.config("debug", true);	//开启调试模式
		JTemplate.helper("dateformat", function(time, format) {

			var date = new Date();
			date.setTime(time*1000)

			var map = {
				"y": date.getFullYear(), //年份
				"M": date.getMonth() + 1, //月份
				"d": date.getDate(), //日
				"h": date.getHours(), //小时
				"m": date.getMinutes(), //分
				"s": date.getSeconds(), //秒
				"q": Math.floor((date.getMonth() + 3) / 3), //季度
				"S": date.getMilliseconds() //毫秒
			};
			format = format.replace(/([yMdhmsqS])+/g, function(all, t){

				return[map[t]];

			});
			return format;

		});
		var html = JTemplate.render(template, {list : data});
		//console.log(html);
		document.getElementById("container").innerHTML = html;

		function testFun() {
			alert("fuck it, whatever.");
		}

	</script>
</body>
</html>
